<template>
	<view>
		<view class="whole" v-if="familyList.length<=0">
			<image class="image" src="../../static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>

		<view class="familymembers" v-for="(item,index) in familyList" :key="index">
			<view class="lie" @click="detailed(item)">
				<view class="image">
					<image src="../../static/image/jiashulaidui-2@2x.png" mode="aspectFit"></image>
				</view>
				<view class="tree"></view>
				<view class="details">
					<view><text class="name">{{item.familyName}}</text></view>
					<view class="relationship"><text>关系:<text>{{item.relationshipText}}</text></text></view>
				</view>
			</view>
			<view class="caozuo">
				<view class="delete" @click="delets(item)">
					<view>
						<image src="../../static/image/shanchu.png"></image>
					</view>
					<view><text>删除</text></view>
				</view>
				<image src="../../static/image/vertical_line.png"></image>
				<view class="add" @click="xiugai(item)">
					<view>
						<image src="../../static/image/xiugai.png"></image>
					</view>
					<view><text>修改</text></view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				familyList: [],
				memberId: '',
				de: [],
				uniqueNo:'',
				upperLimit:'',
				familieslength:'',
				deleteObj: { // 要删除的对象
					birthday: "",
					createdMan: "",
					createdTime: "",
					familyName: "",
					gender: "",
					houseFamilyId: "",
					id: "",
					idCard: "",
					memberId: "",
					memberName: "",
					phone: "",
					relationship: "",
					remark: "",
					updatedTime: ""
				}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.lists();
		},
		onShow() {
			this.family();
			// console.log(this.familyList)
			this.lists();
		},
		methods: {
			//跳转家庭详细信息
			detailed(item){
				uni.navigateTo({
					url: '/pages/familyManagement/family/detailed?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			//跳转家庭添加页面
			onNavigationBarButtonTap(e) {
				uni.navigateTo({
					url: '/pages/familyManagement/family/familyAdd?upperLimit='+this.upperLimit + '&familieslength='+this.familieslength
				});
			},
			family() {
				const id = uni.getStorageSync('id');
				const uniqueNos = uni.getStorageSync('uniqueCode');
				this.uniqueNo = uniqueNos
				// console.log(id)
				this.memberId = id
			},
			
			//获取家庭列表
			async lists() {
				try {
					uni.showLoading({
						title: '正在加载家属列表'
					});
					const ret = await this
						.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
							url: '/api-operate/families/uniqueNo/'+ this.uniqueNo+'',
						});
					if (ret.success == true) {
						if(ret.body.families!=null){
							this.familyList = ret.body.families;
							this.upperLimit = ret.body.upperLimit;
							this.familieslength = ret.body.families.length;
						}else{
							this.familyList=[]
						}
						// console.log(ret.data.data)
					}

				} catch (e) {
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '家属列表,请稍后再试',
						duration: 2000
					});
				}
			},
			//删除家庭成员信息
			async delets(item) {
			// console.log('删除家庭成员信息: ' + JSON.stringify(item));
			this.deleteObj.birthday = item.birthday;
			this.deleteObj.createdMan = item.createdMan;
			this.deleteObj.createdTime = item.createdTime;
			this.deleteObj.familyName = item.familyName;
			this.deleteObj.gender = item.gender;
			this.deleteObj.houseFamilyId = item.houseFamilyId;
			this.deleteObj.id = item.id;
			this.deleteObj.idCard = item.idCard;
			this.deleteObj.memberId = item.memberId;
			this.deleteObj.memberName = item.memberName;
			this.deleteObj.phone = item.phone;
			this.deleteObj.relationship = item.relationship;
			this.deleteObj.remark = item.remark;
			this.deleteObj.updatedTime = item.updatedTime;
			const ret = await this.$myRequest({
				url: '/api-operate/families/delete',
				method: "POST",
				data: [this.deleteObj] // 要删除的对象
			})
			if (ret.success == true) {
				if (this.familyList.length = 0) {
					this.lists();
					return false;
				}
			
				this.lists();
			}else {
				uni.showToast({
					title: '删除失败',
					duration: 2000,
					icon:none
				});
			}
			},
			//跳转编辑页面
			xiugai(item) {
				uni.navigateTo({
					url: '/pages/familyManagement/family/familyEdit?item=' + encodeURIComponent(JSON.stringify(item))
				});
				// console.log(item)
			}
		}
	}
</script>

<style lang="scss">
	.whole {
		text-align: center;
		font-size: 60rpx;
		font-weight: bold;
		color: #a6a6a6;

		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}

	.familymembers {
		margin-top: 20rpx;
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;

		.image {
			height: 180rpx;
			width: 140rpx;
			display: flex;
			align-items: center;

			image {
				margin: 0;
				width: 100rpx;
				left: 30rpx;
				height: 100rpx;
			}
		}

		.details {
			margin-left: 30rpx;
			height: 120rpx;
			width: 200rpx;

			// display: flex;
			.name {
				// position: fixed;
				// background-color: #00ffff;
				width: 200rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #000000;
			}

			.relationship {
				// position: fixed;
				margin-top: 20rpx;
				// background-color: #00ffff;
				width: 200rpx;
				margin-bottom: 50rpx;
			}
		}

		.tree {
			width: 2px;
			height: 60px;
			background: darkgray;
		}
	}

	.caozuo {
		display: flex;
		// position: fixed;
		// right: 0;
		margin-left: 80rpx;

		image {
			width: 50rpx;
			height: 120rpx;
		}

	}

	.delete {
		margin-right: 20rpx;

		image {
			margin-left: 10rpx;
			width: 50rpx;
			height: 50rpx;
		}

		text {
			font-size: 40rpx;
		}
	}

	.lie {
		display: flex;
		align-items: center;
	}

	.add {
		margin-left: 20rpx;
		margin-right: 40rpx;

		image {
			margin-left: 10rpx;
			width: 50rpx;
			height: 50rpx;
		}

		text {
			font-size: 40rpx;
		}
	}

	.xiugai {
		background-color: #007AFF;
		width: 80%;
		height: 200rpx;
	}

	.addList {
		// margin-top: 20rpx;
		height: 100rpx;
		background-color: #FFFFFF;

		display: flex;
		color: #565656;
		font-size: 13px;
		font-weight: 600;
		flex-direction: row;
		align-items: center;
	}

	.Phone {
		// background-color: #007AFF;
		width: 200rpx;
		margin-left: 40rpx;
		font-size: 35rpx;
	}
</style>
